<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 按钮部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">接引配置</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div>
            <el-button
              class="bg_button"
              size="small"
              @click="addConfig"
              type="primary"
              >新建接引</el-button
            >
          </div>
        </div>
      </div>

      <!-- 表格部分 -->
      <el-row class="main-el-row-content">
        <el-table
          :data="showData"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
        >
          <!-- :cell-class-name="tableCellClassName" -->
          <!-- @row-dblclick="dbclick" -->

          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="tableName" label="数据名称" align="left">
          </el-table-column>
          <el-table-column
            prop="sourceTable"
            label="数据源表"
            width="300"
            align="left"
          >
          </el-table-column>
          <el-table-column prop="targetTable" label="目标表" align="left">
          </el-table-column>
          <el-table-column label="单次接引条数" align="left" width="300">
            <template slot-scope="scope">
              <span active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.rowNum }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="left">
            <template slot-scope="scope">
              <div v-if="scope.row.status">
                <el-tag class="bg_none" type="success">启动</el-tag>
              </div>
              <div v-else>
                <el-tag class="bg_none" type="danger" style="color: #fe2e64"
                  >暂停</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="100">
            <template slot-scope="scope">
              <!-- <el-button
              type="text"
              @click="editSource(scope.row.id, 'edit')"
              size="small"
              >编辑</el-button
            >  -->
              <el-button
                type="text"
                style="color: #fe2e64"
                @click="editSource(scope.row.id, 'del')"
                size="small"
              >
                <span class="el-icon-delete">删除</span>
                </el-button
              >
              <!-- <el-button type="text" @click="jieyin(scope)" size="small"
                >启动</el-button
              >
              <el-button
                type="text"
                @click="jieyin(scope)"
                style="color: #fe2e64"
                size="small"
                >暂停</el-button
              > 
              <el-button type="text" @click="jieyin(scope)" size="small"
                >重新接引</el-button
              >
              <el-button
                type="text"
                @click="jieyin(scope)"
                style="color: #fe2e64"
                size="small"
                >查看数据</el-button
              >-->
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="div-el-pagination" v-show="pageFlag">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          background
          layout="prev, pager, next, total, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹出框部分 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="1000px"
      height="auto"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="false"
      :before-close="closeDialog"
    >
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">新建接引</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <div style="height: 360px; overflow-y: auto" ref="scrollDiv">
        <el-form
          :inline="true"
          :model="form2"
          class="demo-form-inline"
          ref="form2"
          :rules="rules"
          label-width="180px"
        >
          <div class="table-back">
            <div class="title_table">基本信息配置</div>
            <el-form-item label="数据表名" prop="tableName">
              <el-input
                v-model="form2.tableName"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="描述" prop="configDesc">
              <el-input
                v-model="form2.configDesc"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="数据源" prop="dataSourceId">
              <el-select
                v-model="form2.dataSourceId"
                @change="getshuju"
                style="width: 220px"
              >
                <!-- <el-option label="请选择" value="0"></el-option>-->
                <el-option
                  v-for="(item, index) in dataSourceList"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="单次接引条数" prop="rowNum">
              <el-input v-model="form2.rowNum" style="width: 220px"></el-input>
            </el-form-item>

            <el-form-item label="源表" prop="sourceTable">
              <el-select
                v-model="form2.sourceTable"
                @change="getBdxin"
                style="width: 220px"
              >
                <el-option
                  v-for="(item, index) in userbiao"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目标表" prop="targetTable">
              <el-select
                v-model="form2.targetTable"
                @change="getMbxin"
                style="width: 220px"
              >
                <el-option
                  v-for="(item, index) in mubiaobiao"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 
            <el-form-item label="源文件路径" prop="sourcePath">
              <el-input
                v-model="form2.sourcePath"
                style="width: 220px"
              ></el-input>
            </el-form-item>
            <el-form-item label="目标文件路径" prop="targetPath">
              <el-input
                v-model="form2.targetPath"
                style="width: 220px"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="源表比较字段" prop="keyField">
              <el-select
                v-model="form2.keyField"
                @change="getBjzd($event)"
                style="width: 220px"
              >
                <el-option
                  v-for="(item, index) in yuanziduan"
                  :label="item.columnName"
                  :value="item.columnName"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="目标表比较字段" prop="targetKeyField">
              <el-select
                v-model="form2.targetKeyField"
                @change="getMbbjzd($event)"
                style="width: 220px"
              >
                <el-option
                  v-for="(item, index) in mubziduan"
                  :label="item.columnName"
                  :value="item.columnName"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="多主键" prop="multiPK">
              <el-input v-model="form2.multiPK" style="width: 220px"></el-input>
            </el-form-item> -->
            <el-form-item label="多主键" prop="multiPK">
              <el-select v-model="form2.multiPK" style="width: 220px">
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div v-if="columnsInfo.length != 0" class="table-back">
            <div class="title_table">字段配置</div>
            <div v-for="(item, index) in columnsInfo" :key="index">
              <el-form-item label="源字段" prop="sourceField">
                <el-select
                  v-model="form2.sourceField[index]"
                  style="width: 220px"
                  @change="yzdnr($event, index)"
                >
                  <el-option
                    v-for="(item, index) in yuanziduan"
                    :label="item.columnName"
                    :value="item.columnName"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="目标字段" prop="targetField">
                <el-select
                  v-model="form2.targetField[index]"
                  style="width: 220px"
                  @change="mbzdnr($event, index)"
                >
                  <el-option
                    v-for="(item, index) in mubziduan"
                    :label="item.columnName"
                    :value="item.columnName"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作">
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteFormItem(index)"
                  >删 除</el-button
                >
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div style="margin-top: 20px">
        <el-button
          size="small"
          plain
          @click="addForm()"
          icon="el-icon-plus"
          class="add-button bg_button"
          >添 加</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="closeDialog()"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="saveInfo('form2')"
          >新 建</el-button
        >
      </div>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog
      :visible.sync="dialogDelete"
      width="1000px"
      height="auto"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="false"
      :before-close="closeDialog"
    >
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">删除</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <div style="height: 360px; overflow-y: auto">
        <el-form
          :inline="true"
          :model="form4"
          class="demo-form-inline"
          ref="form4"
          :rules="rules"
          label-width="180px"
        >
          <div class="table-back">
            <div class="title_table">基本信息配置</div>
            <el-form-item label="数据表名">
              <el-input
                disabled
                v-model="form4.tableName"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="描述">
              <el-input
                disabled
                v-model="form4.configDesc"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="数据源">
              <el-input
                disabled
                v-model="form4.dataSourceName"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="单次接引条数">
              <el-input
                v-model="form4.rowNum"
                style="width: 220px"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="源表">
              <el-input
                disabled
                v-model="form4.sourceTable"
                style="width: 220px"
              ></el-input>
            </el-form-item>
            <el-form-item label="目标表">
              <el-input
                disabled
                v-model="form4.targetTable"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="源文件路径">
              <el-input
                disabled
                v-model="form4.sourcePath"
                style="width: 220px"
              ></el-input>
            </el-form-item>
            <el-form-item label="目标文件路径">
              <el-input
                disabled
                v-model="form4.targetPath"
                style="width: 220px"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="源表比较字段">
              <el-input
                disabled
                v-model="form4.keyField"
                style="width: 220px"
              ></el-input>
            </el-form-item>

            <el-form-item label="目标表比较字段">
              <el-input
                disabled
                v-model="form4.targetKeyField"
                style="width: 220px"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="多主键">
              <el-input
                v-model="form4.multiPK"
                style="width: 220px"
                disabled
              ></el-input>
            </el-form-item> -->
          </div>
          <div v-if="columnsInfo.length != 0">
            <div class="title_table">字段配置</div>
            <div
              class="table-back"
              v-for="(item, index) in columnsInfo"
              :key="index"
            >
              <el-form-item label="源字段">
                <el-input
                  disabled
                  v-model="form4.sourceField[index]"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
              <el-form-item label="目标字段">
                <el-input
                  disabled
                  v-model="form4.targetField[index]"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogDelete = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="deleteInfo(form4.id)"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { post } from "../../utils/request";
export default {
  name: "dataccessView",
  data() {
    return {
      dialogVisible: false,
      dialogEdit: false,
      dialogDelete: false,
      userbiao: [],
      mubiaobiao: null,
      yuanziduan: null,
      setyuzidulx: null,
      setmubadulx: null,
      mubziduan: null,
      uid: null,
      form: {
        date1: "",
        date2: "",
      },
      total: 0,
      pageSize: 11,
      currentPage: 1,
      pageFlag: true,
      dataSourceList: [],
      form2: {
        dataSourceId: "",
        configDesc: "",
        sourceTable: "",
        targetTable: "",
        sourcePath: "",
        targetPath: "",
        keyField: "",
        keyType: "",
        rowNum: "", // 每次接引数据的条数
        tableName: "", // 新增表名称
        targetKeyField: "",
        targetKeyType: "",
        sourceField: [],
        targetField: [],
        sourceDataType: [],
        targetDataType: [],
        ifDefault: [],
        defaultValue: [],
        multiPK: "",
      },
      form3: {
        id: "",
        dataSourceId: "",
        configDesc: "",
        sourceTable: "",
        targetTable: "",
        sourcePath: "",
        targetPath: "",
        keyField: "",
        keyType: "",
        targetKeyField: "",
        targetKeyType: "",
        sourceField: [],
        targetField: [],
        sourceDataType: [],
        targetDataType: [],
        ifDefault: [],
        defaultValue: [],
        multiPK: "",
      },
      form4: {
        dataSourceId: "",
        configDesc: "",
        sourceTable: "",
        dataSourceName: "",
        targetTable: "",
        sourcePath: "",
        targetPath: "",
        keyField: "",
        keyType: "",
        rowNum: "", // 每次接引数据的条数
        tableName: "", // 新增表名称
        targetKeyField: "",
        targetKeyType: "",
        sourceField: [],
        targetField: [],
        sourceDataType: [],
        targetDataType: [],
        ifDefault: [],
        defaultValue: [],
        multiPK: "",
      },
      columnsInfo: [],
      //tableData: [],
      showData: [],
      rules: {
        dataSourceId: [
          {
            required: true,
            message: "请选择数据源",
            trigger: "change",
          },
        ],
        configDesc: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
        sourceTable: [
          {
            required: true,
            message: "请选择源表",
            trigger: "blur",
          },
        ],
        targetTable: [
          {
            required: true,
            message: "请选择目标表",
            trigger: "blur",
          },
        ],

        keyField: [
          {
            required: true,
            message: "请选择比较字段",
            trigger: "blur",
          },
        ],
        keyType: [
          {
            required: true,
            message: "请输入比较字段类型",
            trigger: "blur",
          },
        ],
        rowNum: [
          {
            required: true,
            message: "请输入单次接引条数",
            trigger: "blur",
          },
        ],
        tableName: [
          {
            required: true,
            message: "请输入数据表名",
            trigger: "blur",
          },
        ],
        targetKeyField: [
          {
            required: true,
            message: "请选择目标表比较字段",
            trigger: "blur",
          },
        ],
        sourceField: [
          {
            required: true,
            message: "请选择源字段",
            trigger: "blur",
          },
        ],
        targetField: [
          {
            required: true,
            message: "请选择目标字段",
            trigger: "blur",
          },
        ],
        sourceDataType: [
          {
            required: true,
            message: "请输入源类型",
            trigger: "change",
          },
        ],
        targetDataType: [
          {
            required: true,
            message: "请输入目标类型",
            trigger: "change",
          },
        ],
        ifDefault: [
          {
            required: true,
            message: "请选择是否默认",
            trigger: "blur",
          },
        ],
        defaultValue: [
          {
            required: true,
            message: "请输入关键字值",
            trigger: "blur",
          },
        ],
        multiPK: [
          {
            required: true,
            message: "请选择是否多主键",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    change() {
      this.$forceUpdate();
    },
    init() {
      this.getDataTransferConfigList();
      this.getDataSourceList();
    },
    handleCurrentChange(currentPage) {
      // 分页
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataTransferConfigList();
    },
    addConfig: function () {
      this.dialogVisible = true;
      this.columnsInfo = [];
    },
    changeDefaultValue: function (index) {
      if (this.form3.ifDefault[index] == "0") {
        this.form3.defaultValue[index] = "";
      }
    },
    changeForm2DefaultValue: function (index) {
      if (this.form2.ifDefault[index] == "0") {
        this.form2.defaultValue[index] = "";
      }
    },
    addForm() {
      var that = this;
      that.columnsInfo.push("1");
      this.handleScrollBottom();
    },
    deleteFormItem: function (index) {
      var that = this;
      //debugger
      that.columnsInfo.splice(index, 1);
      that.form2.sourceField.splice(index, 1);
      that.form2.targetField.splice(index, 1);
      that.form2.sourceDataType.splice(index, 1);
      that.form2.targetDataType.splice(index, 1);
      that.form2.ifDefault.splice(index, 1);
      that.form2.defaultValue.splice(index, 1);
    },
    deleteForm3Item: function (index) {
      var that = this;
      //debugger
      that.columnsInfo.splice(index, 1);
      that.form3.sourceField.splice(index, 1);
      that.form3.targetField.splice(index, 1);
      that.form3.sourceDataType.splice(index, 1);
      that.form3.targetDataType.splice(index, 1);
      that.form3.ifDefault.splice(index, 1);
      that.form3.defaultValue.splice(index, 1);
    },
    closeDialog: function () {
      var that = this;
      //this.$refs.form2.resetFields();
      (that.form2 = {
        dataSourceId: "",
        configDesc: "",
        sourceTable: "",
        targetTable: "",
        sourcePath: "",
        targetPath: "",
        keyField: "",
        keyType: "",
        rowNum: "",
        tableName: "",
        targetKeyField: "",
        targetKeyType: "",
        sourceField: [],
        targetField: [],
        sourceDataType: [],
        targetDataType: [],
        ifDefault: [],
        defaultValue: [],
        multiPK: "",
      }),
        (that.columnsInfo = []);
      that.dialogVisible = false;
      that.dialogEdit = false;
      that.dialogDelete = false;
    },
    // 发送添加请求
    saveInfo(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = that.form2;
          console.log("__________", data);
          console.log("------------form2:" + JSON.stringify(data));
          var detailList = [];
          if (data.sourceField) {
            console.log(data.sourceField);
            for (var i = 0; i < data.sourceField.length; i++) {
              var dataTransferConfigDetail = {
                defaultValue: data.defaultValue[i],
                ifDefault: data.ifDefault[i],
                sourceDataType: data.sourceDataType[i],
                sourceField: data.sourceField[i],
                targetDataType: data.targetDataType[i],
                targetField: data.targetField[i],
              };
              detailList.push(dataTransferConfigDetail);
            }
          }

          console.log(detailList);
          var params = {
            configDesc: data.configDesc,
            dataSourceId: data.dataSourceId,
            keyField: data.keyField,
            keyType: data.keyType,
            rowNum: data.rowNum,
            tableName: data.tableName,
            sourcePath: data.sourcePath,
            sourceTable: data.sourceTable,
            targetPath: data.targetPath,
            targetTable: data.targetTable,
            targetKeyField: data.targetKeyField,
            targetKeyType: data.targetKeyType,
            dataTransferConfigDetail: detailList,
            multiPK: data.multiPK,
          };
          // dataTransferConfigDetail
          console.log(params);
          console.log("------------params:" + JSON.stringify(params));
          this.listLoading = true;
          post(
            "/api/idatamanage/dataTransferConfig/addDataTransferConfig",
            params
          )
            .then((res) => {
              console.log("res=>", res.data);
              if (res.data.message == "成功") {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
                this.getDataTransferConfigList();
                this.listLoading = false;
              } else {
                this.$message({
                  message: "保存失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("保存失败");
            })
            .finally(() => {
              that.closeDialog();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 获取数据源（接引源里面的东西）并使用双向绑定给dataSourceList 在页面上供其选择
    getDataSourceList() {
      console.log(123);
      var that = this;
      var params = {
        pageSize: that.pageSize, // 一页有几条数据
        pageNum: that.currentPage, // 当前点击的是第几页
      };
      post("/api/idatamanage/dataTransferConfig/queryDataSource", params)
        .then((res) => {
          console.log("dataSourceList=>", res.data.data.dataList);
          var dataSource = res.data.data;
          that.dataSourceList = dataSource.dataList;
          console.log(that.dataSourceList);
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    getshuju(value) {
      // 获取数据源里的表名以及目标表里的表名
      console.log(value);
      this.getBdarr(value);
      this.getmubiao();
    },

    getBdarr(value) {
      // 获取这个数据源里的所有表名 并赋值给userbiao 让其渲染成一个下拉列表
      console.log(value);
      this.uid = value;
      console.log(this.uid);
      var params = {
        id: this.uid,
      };
      post("/api/idatamanage/dataTransferConfig/queryTables", params).then(
        (res) => {
          console.log("获取这个数据源里的所有表名", res);
          this.userbiao = res.data.data;
        }
      );
    },
    getmubiao() {
      // 获取目标表里的所有表名 并赋值给 mubiaobiao 让其渲染成一个下拉列表
      post("/api/idatamanage/dataTransferConfig/queryDstTables").then((res) => {
        // console.log("获取目标表里的所有表名", res.data.data);
        this.mubiaobiao = res.data.data;
      });
    },
    // 获取这个数据源里的表的字段 去重然后给 form2.sourceField 让其渲染一个下拉列表
    getBdxin(value) {
      console.log(value);
      var params = {
        id: this.uid,
        tableName: value,
      };
      console.log(params);
      post("/api/idatamanage/dataTransferConfig/queryColumns", params).then(
        (res) => {
          console.log("获取这个数据源里的表的字段", res.data.data);
          this.yuanziduan = res.data.data;
          // var yuanziduanleixing = [];
          // for (let i = 0; i < this.yuanziduan.length; i++) {
          //   yuanziduanleixing.push(this.yuanziduan[i].typeName);
          // }
          // // console.log("获取原表比较字段类型",yuanziduanleixing)
          // console.log("map去重后的", this.newArrFn(yuanziduanleixing));
          // this.setyuzidulx = this.newArrFn(yuanziduanleixing);
          // console.log(this.setyuzidulx);
        }
      );
    },
    // 数组去重
    newArrFn(arr) {
      let newArr = [];
      let map = new Map();
      for (let i = 0; i < arr.length; i++) {
        // 如果 map里面不包含，就设置进去
        if (!map.has(arr[i])) {
          map.set(arr[i], true);
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    // 获取这个目标表的字段 去重然后给 form2.targetField 让其渲染一个下拉列表
    getMbxin(value) {
      var params = {
        tableName: value,
      };
      post("/api/idatamanage/dataTransferConfig/queryDstColumns", params).then(
        (res) => {
          console.log("获取这个目标表的字段", res.data.data);
          this.mubziduan = res.data.data;
          // var mubziduanleixing = [];
          // for (let i = 0; i < this.mubziduan.length; i++) {
          //   mubziduanleixing.push(this.mubziduan[i].typeName);
          // }
          // // console.log("获取原表比较字段类型",mubziduanleixing)
          // var newArr = new Set(mubziduanleixing);
          // this.setmubadulx = newArr;
          // this.form2.targetField = this.setmubadulx;
          // console.log(this.form2.targetField);
        }
      );
    },
    // 选择字段之后将数据类型一同传递
    getMbbjzd(value) {
      console.log(value);

      this.mubziduan.forEach((item) => {
        if (item.columnName == value) {
          this.form2.targetKeyType = item.typeName;
          console.log(this.form2.targetKeyType);
        }
      });
    },
    getBjzd(value) {
      console.log(value);
      this.yuanziduan.forEach((item) => {
        if (item.columnName == value) {
          this.form2.keyType = item.typeName;
          console.log(this.form2.keyType);
        }
      });
    },
    yzdnr(value, key) {
      console.log(value, key);
      // console.log(this.form2.sourceDataType);
      this.yuanziduan.forEach((item) => {
        if (item.columnName == value) {
          this.form2.sourceField[key] = value;
          this.form2.sourceDataType.push(item.typeName);
          this.form2.sourceDataType[key] = item.typeName;
        }
      });
    },
    mbzdnr(value, key) {
      console.log(value, key);
      console.log(this.columnsInfo);
      // console.log(this.form2.targetDataType)
      this.mubziduan.forEach((item) => {
        if (item.columnName == value) {
          this.form2.targetField[key] = value;
          this.form2.targetDataType.push(item.typeName);
          this.form2.targetDataType[key] = item.typeName;
        }
      });
    },
    // 查询引接配置列表 接引过或者正在接引的都在这里
    getDataTransferConfigList() {
      var that = this;
      var params = {
        pageSize: that.pageSize,
        pageNum: that.currentPage,
      };
      post(
        "/api/idatamanage/dataTransferConfig/queryDataTransferConfig",
        params
      )
        .then((res) => {
          console.log("resdata=>", res.data.data.dataList);
          var dataSource = res.data.data;
          console.log(dataSource.dataList);
          dataSource.dataList.forEach((item) => {
            // console.log("每一项", item);
            if (item.status == 1) {
              item.status = true;
            } else if (item.status == 0) {
              item.status = false;
            }
          });
          console.log(dataSource);
          // for (var i = 0; i < dataSource.rows.length; i++) {
          //   if (dataSource.rows[i].location) {
          //     dataSource.rows[i].location = dataSource.rows[i].location.slice(
          //       0,
          //       19
          //     );
          //   }
          // }
          // console.log("使用之后", dataSource);
          that.showData = dataSource.dataList;
          // console.log(that.showData);
          that.total = dataSource.total;
          if (that.total <= 0) {
            //alert(that.total);
            this.pageFlag = false;
          } else {
            //alert(that.total);
            this.pageFlag = true;
          }
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
          this.pageFlag = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 判断点击的是删除还是修改，来执行下一步操作
    editSource(id, type) {
      console.log(id);
      console.log(type);
      var that = this;
      if (type == "del") {
        that.dialogDelete = true;
      } else {
        that.dialogDelete = true;
      }
      var params = {
        id: id,
        pageSize: that.pageSize,
        pageNum: that.currentPage,
      };
      post(
        "/api/idatamanage/dataTransferConfig/queryDataTransferConfig",
        params
      )
        .then((res) => {
          console.log("form4 res=>", res.data.data.dataList[0]);
          //alert(type);
          if (type == "del") {
            console.log("cves");
            let formdata = res.data.data.dataList[0];
            // (that.form4 = {
            //   id: "",
            //   dataSourceId: "",
            //   configDesc: "",
            //   sourceTable: "",
            //   targetTable: "",
            //   sourcePath: "",
            //   targetPath: "",
            //   keyField: "",
            //   keyType: "",
            //   rowNum: "",
            //   tableName: "",
            //   targetKeyField: "",
            //   targetKeyType: "",
            //   sourceField: [],
            //   targetField: [],
            //   sourceDataType: [],
            //   targetDataType: [],
            //   ifDefault: [],
            //   defaultValue: [],
            // }),
            console.log(formdata);
            console.log(formdata.id);
            // that.columnsInfo = []
            that.form4.id = formdata.id;
            that.form4.dataSourceId = formdata.dataSourceId;
            that.form4.configDesc = formdata.configDesc;
            that.form4.dataSourceName = formdata.dataSourceName;
            that.form4.sourceTable = formdata.sourceTable;
            that.form4.targetTable = formdata.targetTable;
            that.form4.sourcePath = formdata.sourcePath;
            that.form4.targetPath = formdata.targetPath;
            that.form4.keyField = formdata.keyField;
            that.form4.keyType = formdata.keyType;
            that.form4.rowNum = formdata.rowNum;
            that.form4.tableName = formdata.tableName;
            that.form4.targetKeyField = formdata.targetKeyField;
            that.form4.targetKeyType = formdata.targetKeyType;
            that.form4.multiPK = formdata.multiPK;
            let detailConfigList = formdata.dataTransferConfigDetail;

            console.log("接口请求之后", that.form4);
            console.log(detailConfigList);
            if (detailConfigList.length) {
              for (let i = 0; i < detailConfigList.length; i++) {
                that.form4.sourceField.push(detailConfigList[i].sourceField);
                that.form4.targetField.push(detailConfigList[i].targetField);
                that.form4.sourceDataType.push(
                  detailConfigList[i].sourceDataType
                );
                that.form4.targetDataType.push(
                  detailConfigList[i].targetDataType
                );
                that.form4.ifDefault.push(detailConfigList[i].ifDefault);
                that.form4.defaultValue.push(detailConfigList[i].defaultValue);
                that.columnsInfo.push(1);
                console.log(detailConfigList[i]);
              }
            }
          } else {
            (that.form3 = {
              id: "",
              dataSourceId: "",
              configDesc: "",
              sourceTable: "",
              targetTable: "",
              sourcePath: "",
              targetPath: "",
              keyField: "",
              keyType: "",
              targetKeyField: "",
              targetKeyType: "",
              sourceField: [],
              targetField: [],
              sourceDataType: [],
              targetDataType: [],
              ifDefault: [],
              defaultValue: [],
            }),
              (that.columnsInfo = []);
            that.form3.id = res.data.id;
            that.form3.dataSourceId = res.data.dataSourceId;
            that.form3.configDesc = res.data.configDesc;
            that.form3.sourceTable = res.data.sourceTable;
            that.form3.targetTable = res.data.targetTable;
            that.form3.sourcePath = res.data.sourcePath;
            that.form3.targetPath = res.data.targetPath;
            that.form3.keyField = res.data.keyField;
            that.form3.keyType = res.data.keyType;
            that.form3.targetKeyField = res.data.targetKeyField;
            that.form3.targetKeyType = res.data.targetKeyType;
            that.form3.multiPK = res.data.multiPK;

            let detailConfigList = res.data.transferDetailConfigList;
            console.log(detailConfigList.length);
            if (detailConfigList.length) {
              for (let i = 0; i < detailConfigList.length; i++) {
                that.form3.sourceField.push(detailConfigList[i].sourceField);
                that.form3.targetField.push(detailConfigList[i].targetField);
                that.form3.sourceDataType.push(
                  detailConfigList[i].sourceDataType
                );
                that.form3.targetDataType.push(
                  detailConfigList[i].targetDataType
                );
                that.form3.ifDefault.push(detailConfigList[i].ifDefault);
                that.form3.defaultValue.push(detailConfigList[i].defaultValue);
                that.columnsInfo.push("1");
                console.log(detailConfigList[i]);
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
        })
        .finally(() => {});
    },
    // 删除指定的哪一项
    deleteInfo(id) {
      // alert("删除", id);
      var params = {
        id: id,
      };
      post(
        "/api/idatamanage/dataTransferConfig/deleteDataTransferConfig",
        params
      )
        .then((res) => {
          console.log("res=>", res);
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.dialogDelete = false;
          this.getDataTransferConfigList();
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 修改指定的那一项 并发送请求将修改的数据进行传递
    updateInfo: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this;
          let data = that.form3;
          var detailList = [];
          console.log(data.sourceField);
          for (var i = 0; i < data.sourceField.length; i++) {
            var dataTransferConfigDetail = {
              dataTransferId: data.id,
              defaultValue: data.defaultValue[i],
              ifDefault: data.ifDefault[i],
              sourceDataType: data.sourceDataType[i],
              sourceField: data.sourceField[i],
              targetDataType: data.targetDataType[i],
              targetField: data.targetField[i],
            };
            detailList.push(dataTransferConfigDetail);
          }
          var params = {
            id: data.id,
            configDesc: data.configDesc,
            dataSourceId: data.dataSourceId,
            keyField: data.keyField,
            keyType: data.keyType,
            sourcePath: data.sourcePath,
            sourceTable: data.sourceTable,
            targetPath: data.targetPath,
            targetTable: data.targetTable,
            multiPK: data.multiPK,
            dataTransferConfigDetail: detailList,
          };
          console.log("------------params:" + JSON.stringify(params));
          post(
            "/api/idatamanage/dataTransferConfig/updateDataTransferConfig",
            params
          )
            .then((res) => {
              console.log("res=>", res.data.data);
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.dialogDelete = false;
              this.getDataTransferConfigList();
              //this.cleanForm2();
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("保存失败");
            })
            .finally(() => {
              this.listLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 滚动到顶部
    handleScrollTop() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollTo({ top: 0, behavior: "smooth" });
      });
    },
    // 滚动到底部
    handleScrollBottom() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollTo({
          top: scrollElem.scrollHeight,
          behavior: "smooth",
        });
      });
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
  .title_table {
    color: #84f2ff;
    font-size: 18px;
  }
}

.table-back {
  border: 1px solid #0077a9;
  padding: 5px;
  margin-bottom: 10px;
}
::v-deep .el-form-item__label {
  color: #fff !important;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #fff;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}
.bg_none {
  background: transparent;
}
.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}
::v-deep .el-table--striped {
  .el-table__body {
    tr.el-table__row--striped {
      td.el-table__cell {
        background: #0077a9;
      }
    }
  }
}
</style>